<template>
  <div class="content">
    <el-dialog
      title="选择"
      :visible="dialogVisible"
      width="80%"
      :before-close="handleClose">
      <el-row :gutter="20">
        <div class="search">
          <el-select
            v-model="query.sourceId"
            filterable
            class="filter-item"
            clearable
            placeholder="请选择类型"
          >
            <el-option
              v-for="item in sourceTypeList"
              :label="item.name"
              :value="item.type"
            />
          </el-select>
          <el-select
            v-model="query.orderBy"
            filterable
            class="filter-item"
            clearable
            placeholder="请选择类型"
          >
            <el-option
              v-for="item in orderList"
              :label="item.name"
              :value="item.type"
            />
          </el-select>
          <el-button
            v-waves
            type="primary"
            icon="el-icon-search"
            @click="getAllMasterCardQuery()"
          >
            搜索
          </el-button>
        </div>
        <el-col :span="14">
          <div class="table">
            <el-table
              border
              :data="masterList"
              style="width: 100%">
              <el-table-column
                label="序号"
                prop="id"
                align="center"
                width="50"
              >
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="cardNum"
                label="主卡卡号"
                width="">
              </el-table-column>
              <el-table-column
                align="center"
                prop="cardNum"
                label="类型"
                width="80">
                <template slot-scope="scope">
                  {{ scope.row.sourceId | typeFilter1 }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="unSubNum"
                label="未分配子卡数"
                width="100">
              </el-table-column>
              <el-table-column
                align="center"
                prop="currentMoney"
                label="未分配金额"
                width="100">
              </el-table-column>
              <el-table-column
                align="center"
                label="操作"
                width="100">
                <template slot-scope="scope">
                  <el-button @click="getSubCardAlList(scope.row)" type="text" size="small">未分配子卡</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="table">
            <el-table
              border
              :data="subList"
              style="width: 100%">
              <el-table-column
                label="序号"
                prop="id"
                align="center"
                width="50"
              >
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="cardNum"
                label="卡号"
                width="">
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                width="">
                <template slot-scope="scope">
                  <el-button @click="bind(scope.row)" type="text" size="small">绑定</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
  import waves from "@/directive/waves"; // Waves directive
  import {getOilCardAll, BuyOilBind} from '@/api/v1'
  export default {
    name: 'selectOilCard',
//    props: ['handId'],
    directives: {waves},
    data() {
      return {
        handId: null,
        driverId: null,
        dialogVisible: false,
        sourceTypeList: [
          {
            type: 1,
            name: '中石油'
          },
          {
            type: 2,
            name: '中石化'
          }
        ],
        orderList: [
          {
            type: 1,
            name: '未分配数量从高到低'
          },
          {
            type: 2,
            name: '未分配数量从低到高'
          },
          {
            type: 3,
            name: '未分金额量从高到低'
          },
          {
            type: 4,
            name: '未分金额量从低到高'
          }
        ],
        masterList: [], //主卡
        subList: [],//子卡
        query: {
          parentId: null,//主卡id
          type: null, //类型
          cooId: null, //加油站
          sourceId: null, //油卡类型
          orderBy: null,
        }
      }
    },
    created() {
    },
    filters: {
      typeFilter1(role) {
        switch (role) {
          case 1:
            return "中石油";
          case 2:
            return "中石化";
        }
      }
    },
    methods: {
      handleClose(done) {
        this.subList = []
        this.dialogVisible = false;
      },
      //给父组件调用的方法
      parentRefMethod(id,driverId){
        this.clearQuery();
        this.dialogVisible = true;
        this.query.type = 1;
        this.handId = id;
        this.driverId = driverId;
        this.getOilCardAllList();
      },
      //根据条件查询所有主卡信息
      getAllMasterCardQuery(){
        this.query.type = 1;
        this.getOilCardAllList();
      },
      //主卡点击后，选择子卡
      getSubCardAlList(row){
        this.query.type = 2;
        this.query.parentId = row.id;
        getOilCardAll(this.query).then(res => {
          this.subList = res.data;
          this.clearQuery();
        });
      },
      //根据条件查询所有卡的信息
      getOilCardAllList(){
        getOilCardAll(this.query).then(res => {
          this.masterList = res.data;
        });
      },
      //将选定的子卡id传到父组件中
      bind(row){
        BuyOilBind({
          'driverId': this.driverId,
          'cardId': row.id,
          'id': this.handId
        }).then(res => {
          this.$notify({
            title: "成功",
            message: res.msg,
            type: "success",
            duration: 2000
          });
          this.handleClose();
          this.$emit('bindCard', row.id);
        });

      },
      clearQuery(){
        this.query.type = null;
        this.query.parentId = null;
        this.query.cooId = null;
        this.query.sourceType = null;
        this.query.orderBy = null;
      }

    }
  }
</script>
<style scoped>
  div .el-dialog__body {
    padding: 0px 20px;
  }

  .table {
    padding: 20px;
  }

  .search {
    /*margin-bottom: 20px;*/
    margin-left: 30px;
  }


</style>
